<template>
    <view class="details">
        <view class="headimg">
            <view class="id">
                <text></text>
            </view>
            <view class="headimgtest" @tap="chooseImg">
                <view class="img">
                    <image style="width: 100rpx; height: 100rpx" :src="videoCoverImg"></image>
                </view>
                <text style="font-weight: bold; font-size: 30rpx">{{ name }}</text>
            </view>
            <view class="ph">
                <image class="phimg" src="https://xxzhang.oss-cn-hangzhou.aliyuncs.com/%E9%87%91%E7%89%8C%20%281%29.png"></image>
            </view>
        </view>
        <view class="nianjiandtime">
            <view class="nianji">
                <text class="ztys">{{ classificationName }}</text>
            </view>
            <view class="shijian">
                <text class="ztys">{{ addtime }}</text>
            </view>
        </view>

        <view class="hx"></view>
        <view class="title">
            <text class="title" style="font-size: 15px">{{ title }}</text>
        </view>

        <view class="coursevideoImg" v-if="type == 2">
            <view class="img_box" v-if="classification == 9 || whichIssue == 1">
                <view :class="mediaList.length > 1 ? 'many_img' : ''">
                    <view
                        :class="
                            'img_item ' +
                            (mediaList.length == 1 ? 'one' : mediaList.length == 2 ? 'tou' : mediaList.length == 3 ? 'three' : mediaList.length == 4 ? 'four' : 'many')
                        "
                        v-for="(image, index) in mediaList"
                        :key="index"
                    >
                        <image
                            v-if="mediaList.length == 1"
                            @tap="previewImage"
                            @load="oneImageLoad"
                            :src="image"
                            :data-sources="mediaList"
                            :data-index="index"
                            :style="'border-radius: 16rpx;;margin-top: 16rpx;height: ' + (isHeightMode ? '700rpx' : '')"
                        ></image>

                        <image
                            v-if="mediaList.length == 2"
                            @tap="previewImage"
                            :src="image"
                            :data-sources="mediaList"
                            :data-index="index"
                            mode="aspectFill"
                            style="border-radius: 16rpx; margin-top: 16rpx; height: 320rpx; width: 320rpx"
                        ></image>

                        <image
                            v-if="mediaList.length == 3"
                            @tap="previewImage"
                            :src="image"
                            :data-sources="mediaList"
                            :data-index="index"
                            mode="aspectFill"
                            style="border-radius: 16rpx; margin-top: 16rpx; height: 320rpx; width: 320rpx"
                        ></image>

                        <image
                            v-if="mediaList.length == 4"
                            @tap="previewImage"
                            :src="image"
                            :data-sources="mediaList"
                            :data-index="index"
                            mode="aspectFill"
                            style="border-radius: 16rpx; margin-top: 16rpx; height: 320rpx; width: 320rpx"
                        ></image>

                        <!-- 多张图片 一律使用 aspectFill 并固定宽高 -->

                        <image
                            v-if="mediaList.length == 5"
                            :src="image"
                            @tap="previewImage"
                            :data-sources="mediaList"
                            :data-index="index"
                            mode="aspectFill"
                            style="width: 198rpx; height: 198rpx"
                        ></image>

                        <image
                            v-if="mediaList.length == 6"
                            :src="image"
                            @tap="previewImage"
                            :data-sources="mediaList"
                            :data-index="index"
                            mode="aspectFill"
                            style="width: 198rpx; height: 198rpx"
                        ></image>

                        <image
                            v-if="mediaList.length == 7"
                            :src="image"
                            @tap="previewImage"
                            :data-sources="mediaList"
                            :data-index="index"
                            mode="aspectFill"
                            style="width: 198rpx; height: 198rpx"
                        ></image>

                        <image
                            v-if="mediaList.length == 8"
                            :src="image"
                            @tap="previewImage"
                            :data-sources="mediaList"
                            :data-index="index"
                            mode="aspectFill"
                            style="width: 198rpx; height: 198rpx"
                        ></image>

                        <image
                            v-if="mediaList.length == 9"
                            :src="image"
                            @tap="previewImage"
                            :data-sources="mediaList"
                            :data-index="index"
                            mode="aspectFill"
                            style="width: 198rpx; height: 198rpx"
                        ></image>
                    </view>
                </view>
            </view>
			
			<view class="img_box" v-if="iswatch == 1 &&  whichIssue !== 1">
			    <view :class="mediaList.length > 1 ? 'many_img' : ''">
			        <view
			            :class="
			                'img_item ' +
			                (mediaList.length == 1 ? 'one' : mediaList.length == 2 ? 'tou' : mediaList.length == 3 ? 'three' : mediaList.length == 4 ? 'four' : 'many')
			            "
			            v-for="(image, index) in mediaList"
			            :key="index"
			        >
			            <image
			                v-if="mediaList.length == 1"
			                @tap="previewImage"
			                @load="oneImageLoad"
			                :src="image"
			                :data-sources="mediaList"
			                :data-index="index"
			                :style="'border-radius: 16rpx;;margin-top: 16rpx;height: ' + (isHeightMode ? '700rpx' : '')"
			            ></image>
			
			            <image
			                v-if="mediaList.length == 2"
			                @tap="previewImage"
			                :src="image"
			                :data-sources="mediaList"
			                :data-index="index"
			                mode="aspectFill"
			                style="border-radius: 16rpx; margin-top: 16rpx; height: 320rpx; width: 320rpx"
			            ></image>
			
			            <image
			                v-if="mediaList.length == 3"
			                @tap="previewImage"
			                :src="image"
			                :data-sources="mediaList"
			                :data-index="index"
			                mode="aspectFill"
			                style="border-radius: 16rpx; margin-top: 16rpx; height: 320rpx; width: 320rpx"
			            ></image>
			
			            <image
			                v-if="mediaList.length == 4"
			                @tap="previewImage"
			                :src="image"
			                :data-sources="mediaList"
			                :data-index="index"
			                mode="aspectFill"
			                style="border-radius: 16rpx; margin-top: 16rpx; height: 320rpx; width: 320rpx"
			            ></image>
			
			            <!-- 多张图片 一律使用 aspectFill 并固定宽高 -->
			
			            <image
			                v-if="mediaList.length == 5"
			                :src="image"
			                @tap="previewImage"
			                :data-sources="mediaList"
			                :data-index="index"
			                mode="aspectFill"
			                style="width: 198rpx; height: 198rpx"
			            ></image>
			
			            <image
			                v-if="mediaList.length == 6"
			                :src="image"
			                @tap="previewImage"
			                :data-sources="mediaList"
			                :data-index="index"
			                mode="aspectFill"
			                style="width: 198rpx; height: 198rpx"
			            ></image>
			
			            <image
			                v-if="mediaList.length == 7"
			                :src="image"
			                @tap="previewImage"
			                :data-sources="mediaList"
			                :data-index="index"
			                mode="aspectFill"
			                style="width: 198rpx; height: 198rpx"
			            ></image>
			
			            <image
			                v-if="mediaList.length == 8"
			                :src="image"
			                @tap="previewImage"
			                :data-sources="mediaList"
			                :data-index="index"
			                mode="aspectFill"
			                style="width: 198rpx; height: 198rpx"
			            ></image>
			
			            <image
			                v-if="mediaList.length == 9"
			                :src="image"
			                @tap="previewImage"
			                :data-sources="mediaList"
			                :data-index="index"
			                mode="aspectFill"
			                style="width: 198rpx; height: 198rpx"
			            ></image>
			        </view>
			    </view>
			</view>
			
			<view v-if="iswatch==0">
				<view @tap="doSomethingAsync"  v-if="whichIssue == 2">
					 <button style="margin-top: 40rpx; background-color:burlywood;width: 500rpx;"  >付费观看 <text style="color: green">￥10</text></button>
				</view>
			</view>
        </view>

       <view class="coursevideo" v-if="type == 1">
		   <view v-if="whichIssue == 1">
			   <sunny-video
			   	videoHeight="900rpx"
			   	ref="sunnyVideo" 
			   	:title="title" 
			   	:src="videoSrc" 
			   	:poster="videoCoverImg"
			   />
		   </view>
		   
			<view  v-if="iswatch==1 && whichIssue !== 1">
				<sunny-video 
					videoHeight="900rpx"
					ref="sunnyVideo" 
					:title="title" 
					:src="videoSrc" 
					:poster="videoCoverImg"
				/>
			</view>
			
			<view v-if="iswatch==0 && whichIssue !== 1" style="display: flex;justify-content: center;align-items: center;flex-direction: column;">
				<view>
					<image src="../../static/iconfont/suo.png" style="width: 170rpx; height: 160rpx;"></image>
				</view>
				
				<view @tap="doSomethingAsync"  v-if="whichIssue == 2">
					 <button style="margin-top: 40rpx; background-color:burlywood;width: 500rpx;"  >付费观看 <text style="color: green">￥10</text></button>
				</view>
			</view>

       </view>
	  
	  
	
        <view class="hx2"></view>

        <view class="mod-info">
           <!-- <view class="moinfont">{{ numberOfViewers }}人观看</view> -->
            <view class="moinfont">
                <image @tap="adddianz" src="https://xxzhang.oss-cn-hangzhou.aliyuncs.com/%E7%82%B9%E8%B5%9E.png" style="width: 30rpx; height: 30rpx; margin-right: 8rpx"></image>
                <text @tap="adddianz">点赞{{ dianzNum }}</text>
            </view>
        </view>
		<view v-if="iswatch==0 && whichIssue !== 1">
			<view style="margin-left: 16rpx;" @tap="gotoAppFor">
				<text style="color: #aaaaaa;">
					注：开通会员可免费观看指定10位讲师课件，并且更划算，在'我的-开通会员'中进行操作，或者直接点击本文字跳转
				</text>
				
			</view>
			<!-- <view  @tap="gotoAppFor" style="display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 16rpx;">
				<view style="background-color:burlywood;width: 250rpx;height: 55rpx;;border-radius: 8rpx;display: flex;justify-content: center;align-items: center;">
					前往开通>>
				</view>
						
			</view> -->
		</view>
	
	
    </view>
</template>

<script>
const app = getApp();
var urlPrefix = app.globalData.urlPrefix;
//import SJMAD from "../../common/sjmad.js";
export default {
	onBackPress(options) {
		if (options.from == 'backbutton') {
		 let  pages = getCurrentPages(); // 获取当前页面栈
		      if (pages.length >= 2) {
		        let  prevPage = pages[pages.length - 2].route; // 上一个页面的实例
						 if (prevPage == 'pages/payment/payment') {
							uni.navigateBack({
							        delta: 3,
							    });
						  }else{
								return false;
							}
		 		return true;
		 	}
			
		  }
		  
	},
			    
    data() {
        return {
			iswatch:0,
            lockIcon: false,
            isShow: true,
            title: '',
            videoSrc: '',
            mediaList: [],
            videoCoverImg: '',
            numberOfViewers: 0,
            addtime: null,
            userId: null,
            id: null,
            type: 2,
            imgList: [],
            classification: 5,
            name: null,
            whichIssue: 0,
            lecturerId: null,
            dianzNum: 0,
            isHeightMode: false,
            advertisementId: null,
            classificationName: null,
            image: '',
			
			token:null
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
		
		// 显示加载提示
		uni.showLoading({
		      title: '加载中',
		});
		
        let that = this;
        var userId = uni.getStorageSync('userId');
		var token = uni.getStorageSync('token');
		this.token = token
	
        that.setData({
            userId: userId,
            id: options.id
        });
        uni.request({
            url: urlPrefix + '/api/applet/video/video?id=' + options.id + '&userId=' + userId,
            method: 'GET',
            header: {
                'content-type': 'application/json',
                'token': this.token
            },
            success: function (res) {
				
                that.setData({
                    title: res.data.datas.title,
                    name: res.data.datas.name,
                    videoSrc: res.data.datas.coursewareVideoUrl,
                    videoCoverImg: res.data.datas.userHeadImg,
                    numberOfViewers: res.data.datas.likeNum,
                    addtime: res.data.datas.addTime,
                    type: res.data.datas.type,
                    classification: res.data.datas.classification,
                    whichIssue: res.data.datas.whichIssue,
                    lecturerId: res.data.datas.lecturerId,
                    dianzNum: res.data.datas.dianzNum,
                    mediaList: res.data.datas.imgSrc,
                    classificationName: res.data.datas.classificationName,
					// advertisementViews: res.data.datas.userViews
                });
				uni.hideLoading();
            }
        });
		
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
		
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		let that = this;
		//判断是否支付成功过 //判断是否是会员 //判断是否包月
		uni.request({
		    url: urlPrefix + '/api/applet/video/canIWatchIt?id=' + this.id + '&userId=' + this.userId,
		    method: 'GET',
		    header: {
		        'content-type': 'application/json',
		        'token': this.token
		    },
		    success: function (res) {
		        if (res.data.resp_code == 0) {
		            that.setData({
		                iswatch: 1
		            });
		        }
		    }
		});
		
	},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {	
			
	},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() { // 停止下拉刷新
    uni.stopPullDownRefresh();},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    onShareTimeline(res) {
        // 分享到朋友圈
        return {};
    },

    methods: {
		gotoAppFor(){
			uni.navigateTo({
				url: "/pages/applyFor/applyFor?isMember="+this.isMember,
			})
		},	
				
		async doSomethingAsync() {
			// uni.showToast({
			//     title: '当前功能暂未开放！如有需求，请联系管理员',
			//     icon: 'none',
			//     duration: 2000
			// });
			
		 // 显示加载提示
		      uni.showLoading({
                      title: '订单创建中',
		 		mask:true
					
              });
		 
		 // 执行异步操作
		       await this.fufeiView();
		 
		    
		},
		
		fufeiView(){
			let that = this;
			//创建订单
			uni.request({
			    url: urlPrefix + '/api/app/pay/placeAnOrder?id=' + this.id + '&userId=' + this.userId,
			    method: 'GET',
			    header: {
			        'content-type': 'application/json',
			        'token': this.token
			    },
			    success: function (res) {
			        if (res.data.resp_code == 0) {
					   uni.hideLoading();
			           uni.navigateTo({
			               url: '/pages/payment/payment?id=' 
						   + that.id
						   +'&totalMoney='+res.data.datas.totalMoney  
						   +'&title='+res.data.datas.orderDescribe
						   +'&outTradeNo='+res.data.datas.outTradeNo
						   // +'&closeSeconds='+res.data.datas.closeSeconds
						 
			           });
			        }else {
						uni.showToast({
						    title: '订单创建失败！',
						    icon: 'none',
						    duration: 2000
						});
					}
			    }
			});
		},
		

        // 图片加载后判断图片宽高比例
        oneImageLoad(e) {
            const { width, height } = e.detail;
            if (height >= width) {
                this.setData({
                    isHeightMode: true
                });
            }
        },

        chooseImg: function () {
            uni.navigateTo({
                url: '/pages/courseware/courseware?id=' + this.lecturerId
            });
        },

    
        //点赞课件
        adddianz: function () {
            let that = this;
            uni.request({
                url: urlPrefix + '/api/applet/video/addOrDeleteVideo?id=' + this.id + '&userId=' + this.userId,
                method: 'GET',
                header: {
                    'content-type': 'application/json',
                    'token': this.token
                },
                success: function (res) {
                    if (res.data.resp_code == 0) {
                        that.setData({
                            dianzNum: res.data.datas
                        });
                    }
                }
            });
        },

        previewImage: function (event) {
            let that = this;
            let { sources, index } = event.currentTarget.dataset;
            let currentUrl = event.currentTarget.dataset.sources;
            that.setData({
                imgList: [currentUrl]
            });
            uni.previewImage({
                current: currentUrl[index],
                // 当前显示图片的http链接
                urls: currentUrl // 需要预览的图片http链接列表
            });
        }
    }
};
</script>
<style lang="scss">
@import './coursewaredetails.scss';
</style>
